<template>
	<view class="command_page_wrap">
		<view class="command_box">
			<view class="command_content_box" id="command_content_box">
				<view class="cmd_item_box" v-for="(cmd,indexCMD) in cmdList" :key="indexCMD">
					<text class="label">{{ cmd.time }}</text>
					<text :class="`content ${cmd.type}`" class="">{{ cmd.content }}</text>
				</view>
			</view>
		</view>
		<view class="opt_box">
			<uv-textarea v-model="sendCmd" placeholder="请输入自定义指令"></uv-textarea>
			<!-- 发送按钮 -->
			<uv-button type="primary" style="margin-top: 12px;letter-spacing: 6px;" @click="sendCmdClick">
				<text style="margin-left: 6px;">发送</text>
			</uv-button>

			<!-- 清空自定义指令按钮 -->
			<uv-button type="error" style="margin-top: 12px;letter-spacing: 6px;" @click="clearCustomCmdClick">
				<text style="margin-left: 6px;">清空指令</text>
			</uv-button>


			<!-- 清空面板内容按钮 -->
			<uv-button type="error" style="margin-top: 120px;letter-spacing: 6px;" @click="clearPanelContentClick">
				<text style="margin-left: 6px;">清空面板内容</text>
			</uv-button>
		</view>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				socket: null,
				isConnected: false,
				reconnectionCount: 0,
				wsUrl: 'ws://localhost:8082',
				cmdList: [],
				cmdListLength: 0,
				sendCmd: ''
			}
		},
		onLoad() {
			this.createWebSocket()

		},
		methods: {
			// 发送指令点击事件
			sendCmdClick() {
				if (this.sendCmd.trim() != "") {
					console.log('发送指令：',this.sendCmd);
				} else {
					uni.showToast({
						title:"指令不能为空",
						mask:true,
						icon:"none",
						duration:1000
					})
				}
			},
			// 清空自定义指令点击事件
			clearCustomCmdClick() {
				this.sendCmd = ''
			},
			// 清空面板内容点击事件
			clearPanelContentClick() {
				this.cmdList = []
			},
			// 保持面板滚动条一直在最底部
			scrollYBottom() {
				var cmdBoxEl = document.getElementById('command_content_box');
				cmdBoxEl.scrollTop = cmdBoxEl.scrollHeight;
			},
			// websocket连接
			createWebSocket() {
				this.socket = new WebSocket(this.wsUrl)

				this.socket.onopen = () => {
					console.log('WebSocket connected')
					this.isConnected = true

					// 连接之后重置重连次数
					this.reconnectionCount = 0
				}

				this.socket.onclose = () => {
					console.log('WebSocket disconnected')
					this.isConnected = false

					// 判断是否达到最大重连次数
					if (this.reconnectionCount < 3) {
						this.reconnectionCount += 1

						// 尝试重新连接
						setTimeout(() => {
							console.log.warning(`重新连接第${this.reconnectionCount}次!`)
							this.createWebSocket()
						}, 3000) // 3秒后尝试重新连接
					} else {
						console.log('放弃重连!!!')
					}
				}

				this.socket.onmessage = (event) => {
					console.log('Received message: ', event.data)
					// 处理接收到的消息
					if (event.data.indexOf("content") != -1) {
						this.cmdList.push(JSON.parse(event.data))
						// this.scrollYBottom()
						// this.cmdListLength += 1
						setTimeout(() => {
							this.scrollYBottom()
						}, 50)
					}
				}
			}
		},
		watch: {

		}
	}
</script>

<style lang="scss">
	.command_page_wrap {
		width: 100vw;
		min-height: 94.7vh;
		background-color: #f1f1f1;


		.command_box {
			background-color: #0c0c0c;
			padding: 12px 6px 12px 12px;
			box-sizing: border-box;

			.command_content_box {
				width: 100%;
				height: 360px;
				display: flex;
				flex-direction: column;

				overflow-y: scroll;
				color: white;

				.cmd_item_box {
					width: 100%;
					display: flex;
					flex-direction: row;
					padding: 1.4px 0px;
					letter-spacing: 0.6px;
					box-sizing: border-box;
					font-size: 14px;

					.label {
						margin-right: 12px;
					}

					.content {}

					.info {}

					.success {
						color: #00df00;
					}

					.error {
						color: #e20000;
					}

					.warning {
						color: #ffa914;
					}

				}
			}


		}

		.opt_box {
			padding: 10px;
			// border: 1px solid red;
		}
	}
</style>